<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript高阶函数</title>
</head>
<body>
    <!-- <script src="./js/vue.min.js"></script>` -->
    <script src="./js/vue.min.js"></script>
    <script>
        
        // 编程范式：命令式编程 / 声明式编程  
        // 编程范式：面向对象编程(第一公民:对象) / 函数式编程(第一公民：函数)

        // 函数式编程  举例

        const nums = [10, 20, 30, 111, 222, 333, 777, 666, 999, 1, 3, 7, 9, 6, 8];
        // 要求1:取出小于100的数字
        // let newNums = Array();
        let newNums = [];
        for (let n of nums) {
            if (n < 100) {
                newNums.push(n)
            }
        }
        console.log(newNums);
        // 高阶函数处理方式filter
        // filter中的回调函数有一个要求：必须返回一个boolean值
        // true：当返回true时，函数内部会自动将这次回调的n加入到新的数组中
        // false：当返回false时，函数会过滤掉这次的n
        let newNums3 = nums.filter(function (n) {
            // 小于100时
            return n < 100;
        })
        console.log(newNums3);


        // 要求2:小于100的数字*2
        [10, 20, 30, 1, 3, 7, 9, 6, 8]
        let newNum2 = [];
        for (let i = 0; i < nums.length; i++) {
            if (nums[i] < 100) {
                // nums[i]*=2;
                newNum2.push(nums[i] * 2);
            }
        }
        console.log(nums);
        console.log(newNum2);

        // 高阶函数处理方式map
        // map 函数的使用
        let newNums4 = newNums3.map(function (n) {
            return n * 2
        });
        console.log(newNums4);


        // 要求3：将所有的newNums2数字相加，得到最终结果
        let total = 0;
        for (let n of newNum2) {
            total += n;
        }
        console.log(total);

        // 高阶函数处理方式
        // reduce函数的使用
        // 作用：reduce对数组中的左右内容进行汇总 reduce(参数一，参数二)  参数一为一个函数
        let totalTwo = newNum2.reduce(function (previous, n) {
            // return 100;
            return previous + n;
        }, 0)
        console.log(totalTwo);

        // 参数传入的值：
        // 第一次：previous 0 n 20      0为初始值  ，20为数组的第一个函数
        // 第二次：previous 100 n 20    100为return返回的  ，20为数组的第二个函数 
        // 第三次：previous 100 n 30    100为return返回的  ，30为数组的第三个函数
        // 第四次：previous 100 n 1     100为return返回的  ，10为数组的第四个函数
        // ...

        // 要求3：将所有的newNums2数字相加，得到最终结果
        // 函数式编程
        let totalThree = nums.filter(function (n) {
            return n < 100
        }).map(function (n) {
            return n * 2
        }).reduce(function (previous, n) {
            return previous + n
        }, 0)

        // 箭头函数
        let totalFour = nums.filter(n => n < 100).map(n => n * 2).reduce((pre, n) => pre + n);

        console.log(totalThree);
        console.log(totalFour);
    </script>
</body>
</html>